<%--下面一句是固定格式的--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" />
<script src="/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="/css/style.css" type="text/css" />

<style>
body {
	margin-top: 20px;
	margin: 0 auto;
	width: 100%;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}
</style>
</head>

<body>
	<jsp:include page="/header.jsp"/>
	<div class="row" style="width: 1210px; margin: 0 auto;">
		<div class="col-md-12">
			<ol class="breadcrumb">
				<li><a href="#">首页</a></li>
			</ol>
		</div>
		<%--
		  取出request域对象中的数据，域中存储的是PageBean对象
		  遍历List集合，集合在PageBean对象的属性list中
		  var="product"  遍历到的集合元素，存储在最小域pageContext中
		  product就是域对象的键
		--%>
		<c:forEach items="${pb.list}" var="product">
			<div class="col-md-2" style="height: 260px">
				<a href="product_info.htm"> <img src="/${product.pimage}"
					width="170" height="170" style="display: inline-block;">
				</a>
				<p>
					<a href="product_info.html" style='color: green'>${product.pname}</a>
				</p>
				<p>
					<font color="#FF0000">商城价：&yen;${product.shop_price}</font>
				</p>
			</div>
		</c:forEach>


	</div>

	<!--分页 -->
	<div style="width: 380px; margin: 0 auto; margin-top: 50px;">
		<ul class="pagination" style="text-align: center; margin-top: 10px;">

			<c:if test="${pb.currentPage==1}">
				<li class="disabled"><a href="javascript:;" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span></a></li>
			</c:if>
			<c:if test="${pb.currentPage!=1}">
				<li><a href="/product/queryProductByPage.do?currentPage=${pb.currentPage-1}" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span></a></li>
			</c:if>

			<%--
			  第几页，是循环出来的，从1开始，到总页数结束
			--%>
			<c:forEach begin="1" end="${pb.totalPage}" var="num">
				<%--
				  点击超链接，服务器发请求，提交当前的页数
				  判断，如果页面已经是当前页了，不能点
				--%>
				<c:if test="${pb.currentPage == num}">
					<li class="active"><a href="javascript:;">${num}</a></li>
				</c:if>

				<c:if test="${pb.currentPage != num}">
					<li><a href="/product/queryProductByPage.do?currentPage=${num}">${num}</a></li>
				</c:if>
			</c:forEach>

			<c:if test="${pb.currentPage==pb.totalPage}">
				<li class="disabled"><a href="javascript:;" aria-label="Next">
					<span aria-hidden="true">&raquo;</span>
				</a></li>
			</c:if>
			<c:if test="${pb.currentPage!=pb.totalPage}">
				<li><a href="/product/queryProductByPage.do?currentPage=${pb.currentPage+1}" aria-label="Next">
					<span aria-hidden="true">&raquo;</span>
				</a></li>
			</c:if>

		</ul>
	</div>
	<!-- 分页结束 -->
</body>
<%--
<!--分页 -->
	<div style="width: 380px; margin: 0 auto; margin-top: 50px;">
		<ul class="pagination" style="text-align: center; margin-top: 10px;">
			<li class="disabled"><a href="#" aria-label="Previous"><span
					aria-hidden="true">&laquo;</span></a></li>
			<li class="active"><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">6</a></li>
			<li><a href="#">7</a></li>
			<li><a href="#">8</a></li>
			<li><a href="#">9</a></li>
			<li><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span>
			</a></li>
		</ul>
	</div>
	--%>
</html>